iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
1
自我挑戰組

網頁學習日誌系列 第 1

RWD : LOGO 與選單的排版

  • 分享至 

  • xImage
  •  

首先先設定桌面板的logo和選單並排排版,之後在再新增響應式網頁斷點,讓使用者可在其他裝置觀看。

另外要注意網頁head裡面的mata一定要有Viewport這樣網頁才能變成響應式。

    <!-- Viewport 用在響應式網頁設計 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
  1. 桌面網頁logo和選單並排排版程式碼:

HTML:
設定Header內含logo和menu的ul li項目,裡面皆包含a連結。

<div class="Header">
   <div class="Logo">
     <a href="#">公司Logo</a>
   </div>

   <ul class="Menu">
      <li><a href="#">首頁</a></li>
      <li><a href="#">產品介紹</a></li>
      <li><a href="#">聯絡我們</a></li>
   </ul>
</div>

CSS:

  • Header高度可自由設定,在此為51px

  • Logo為向左浮動float: left; 然後利用margin去調整位置

  • Logo a連結則是設定讓背景圖片取代文字text-indent: -999999px,其中的-999999px可以是任何極大的正負數字,文字在螢幕上看不見但其實存在,最常用在logo和選單連結上面,至於為何不直接在html刪掉公司名稱文字只放logo圖,是因為讀取網頁時如果有公司文字名稱會讓seo更優化。

  • Menu li 像右浮動,這樣與Logo一左一右成並排樣式,至於display: block;可讓Logo和Menu成區塊元素,詳細可看CSS display 屬性。

  • Logo 和Menu li 都放float屬性,裡面的a連結都放文字樣式,是因為外面調位置,裡面調整屬性。

    .Header {
    height: 51px;//高度與行高一樣,則可讓文字垂直置中
    }
    .Logo {
    float: left;
    margin: 10px 0 0 10px; //上、右邊、下、左邊
    }

    .Logo a {
    display: block;
    background: url(../images/logo.png);
    text-indent: -999999px;
    width: 240px;
    height: 88px;
    text-decoration: none; //超連結不要出現底線
    }
    .Menu {
    float: right;
    line-height: 51px;//高度與行高一樣,則可讓文字垂直置中
    }
    .Menu li {
    float: left;
    width: 94px;
    text-align: center;
    list-style: none;//li不要出現符號樣式
    }

    .Menu li a {
    text-decoration: none;
    color: #00a67d;
    display: block;
    margin: 0 1px;
    }

結果如圖片

https://ithelp.ithome.com.tw/upload/images/20200411/20107321b6w1qWGWQy.png

  1. 響應式網頁logo和選單排版程式碼:

因為手機螢幕畫面小,所以都縮成單欄,只要把float都調整成none,再把寬度設定為%,Header的固定高度取消。
@media為手機和平板的斷點,也就是設定響應式的重要關鍵,把上面所提到的float、寬度、高度等程式放在裡面做修正,就可以讓網頁變成響應式網頁了!!

CSS:
為以後整理方便和閱讀性,在上面css下方直接新增斷點,在此設平板電腦斷點最大寬度為768px(max-width: 768px )
如下:

.Header {
    height: 51px;
}
@media (max-width: 768px) {
    .Header {
      max-width: 100%; 
      height: auto;} //最大寬度為100%,取消高度改自動
      }

.Logo {
  float: left;
  margin: 10px 0 0 10px;
  }
  
@media (max-width: 768px) {
    .Logo {
            float: none;//取消浮動
            margin: 0;
    }
}

.Logo a {
    display: block;
    background: url(logo.png);
    text-indent: -999999px;
    width: 240px;
    height: 88px;
    text-decoration: none; 
    }
@media (max-width: 768px) {
    .Logo a{
        margin: 0 auto;//logo置中
    }
}

.Menu {
    float: right;
    line-height: 51px;
}
@media (max-width: 768px) {
    .Menu {
            float: none;
    }
}

.Menu li {
    float: left;
    width: 94px;
    text-align: center;
        list-style: none;
    }

@media (max-width: 768px) {
    .Menu li {
        float: none;
        border-bottom: 1px dashed #66FFDC;//新增底線
        width: 100%;
    }
}

.Menu li a {
      text-decoration: none;
      color: #00a67d;
      display: block;
      margin: 0 1px; 
      }
@media (max-width: 768px) {
    .Menu li a:hover{
        color: black;//滑過文字變黑色
    }
}

結果如圖片

https://ithelp.ithome.com.tw/upload/images/20200411/20107321bO7yryIcGq.png

結果會發現li會向右偏,這是網頁沒有使用reset.css,因為各大瀏覽器都有內建設定,造成排版的時候,就得依每個瀏覽器的不同,而多花好多時間來調整改寫 CSS 語法,所以才有reset.css統一格式化。
在此先不加上reset.css,只讓li不會向右偏,代碼如下:

body,ul,li{
        margin: 0;
        padding: 0;
}

下圖網頁就不會偏向右邊了!!

https://ithelp.ithome.com.tw/upload/images/20200411/20107321TsaQyAsKwD.png


下一篇
CSS : position 絕對定位與相對定位
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言